import {useEffect, useRef} from "react";
import Taro, {getCurrentInstance, useReachBottom} from "@tarojs/taro";
import {connect} from 'react-redux';
import {View, Text, ScrollView} from '@tarojs/components';
import {AtIcon, AtButton} from 'taro-ui';
import {Empty, Swipe, Cell, Button} from '@nutui/nutui-react-taro';
import Car from './carCard';
import './index.less'

function FleetCars(props) {
  const {dispatch, total, carList, loading} = props;
  const closeRef = useRef(null)
  console.log('FleetCars', props);
  const params = getCurrentInstance()?.router?.params || {}; // 路由参数
  useEffect(() => {
    dispatch({
      type: 'fleet/init',
      payload: {
        fleetAccountId: params?.fleetAccountId
      }
    })
  }, []);
  useReachBottom(() => {
    console.log('到底了')
    wx.showToast({title: '正在加载...', icon: 'none'});
    if (carList.length < total) {
      // wx.showToast({title: '正在加载...', icon: 'none'});
      dispatch({
        type: 'fleet/loadMore',
      })
    }
  });
  return (
    <View className='carWrap'>
      <View>
        <View style={{padding: '24rpx 0'}}>
          {
            carList.length ?
              <ScrollView
                scrollY
                scrollWithAnimation
                className='orderWrap'
                enhanced
                onScrollEnd={(e) => {
                  console.log('onScrollEnd', e);
                  // scrollTop > 0, PullToRefresh 不触发 touchmove 事件。
                }}
                onScrollToLower={(e) => {
                  console.log('onScrollToLower', e);
                  if (carList.length < total) {
                    // wx.showToast({title: '正在加载更多数据...', icon: 'none', duration: 1000});
                    Taro.showLoading({
                      title: '正在加载更多订单...',
                      mask: false,
                    })
                    dispatch({
                      type: 'fleet/loadMore',
                    });
                    if (!loading) {
                      Taro.hideLoading()
                    }
                  } else {
                    wx.showToast({title: '已经到底了...', icon: 'none', duration: 1000});
                  }
                }}
              >
                {
                  [...carList].map((i) =>
                    <Swipe
                      ref={closeRef}
                      rightAction={
                        <Button shape="square" type="danger">
                          删除
                        </Button>
                      }
                      onActionClick={() => {
                        closeRef.current.close();
                        dispatch({
                          type: 'fleet/deleteCar',
                          payload: {
                            carId: i.id
                          }
                        })
                      }}
                    >
                      <View
                        onClick={() => {
                          dispatch({
                            type: 'fleet/setState',
                            payload: {
                              currentCar: {...i}
                            }
                          });
                          setTimeout(() => {
                            Taro.navigateTo({url: '/moduleB/pages/fleetCars/add'})
                          }, 500)
                        }}
                      >
                        <Car car={i} isFromFleet={true}/>
                      </View>
                    </Swipe>
                  )
                }
              </ScrollView> :
              <Empty style={{backgroundColor: 'transparent', paddingTop: '100rpx'}} description='暂无车辆'/>
          }
        </View>
        <View className='pageFooter'>
          <View className='buttonInFooter'>
            <AtButton onClick={() => {
              dispatch({
                type: 'fleet/setState',
                payload: {
                  currentCar: {}
                }
              })
              Taro.navigateTo({url: '/moduleB/pages/fleetCars/add'});
            }}>
              <AtIcon value='add' size={18}/> 添加车辆
            </AtButton>
          </View>
        </View>
      </View>
    </View>
  )
}

function mapStateToProps({
                           fleet = {},
                           loading: {effects: {"fleet/loadMore": loading = false} = {}} = {},
                         }) {
  return {
    ...fleet,
    loading
  }
}

export default connect(mapStateToProps)(FleetCars)
